<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true">
        <el-form-item label="领取时间">
          <el-date-picker
            v-model="listQuery.time"
            :default-time="['00:00:00','23:59:59']"
            type="daterange"
            range-separator="-"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"/>
        </el-form-item>
        <el-form-item label="优惠券类型">
          <el-select v-model="listQuery.merchantCouponType" placeholder="请选择" clearable>
            <el-option :value="1" label="满减券"/>
            <el-option :value="2" label="全免券"/>
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select v-model="listQuery.status" placeholder="请选择" clearable>
            <el-option v-for="(item,index) in stutus" :key="index" :value="item.value" :label="item.label"/>
          </el-select>
        </el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row >
      <el-table-column align="center" label="优惠券类型" prop="merchantCouponType">
        <template slot-scope="{row}">
          {{ row.merchantCouponType===1?'满减券':'全免券' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="满减金额" prop="couponMoney"/>
      <el-table-column align="center" label="领取用户(车牌号码)" prop="plateNumber"/>
      <el-table-column align="center" label="领取时间" prop="createTime"/>
      <el-table-column align="center" label="过期时间" prop="endDate"/>
      <el-table-column align="center" label="使用状态" prop="statusName">
        <template slot-scope="{row}">
          <el-tag v-if="row.status==1 || row.status==9">{{row.statusName}}</el-tag>
          <el-tag v-else-if="row.status==7" type="success">{{row.statusName}}</el-tag>
          <el-tag  type="danger" v-else>{{row.statusName}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { fetchList } from './api/index'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getData, } from '@/api/system/dictionary'
export default {
  components: { Pagination },
  data() {
    return {
      stutus:[],
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        time: ['', ''],
        page: 1,
        pageSize: 20,
        merchantId: this.$route.query.merchantId
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }]
    }
  },
  async created() {
		await this.getData()
    this.getList()
  },
  methods: {
		async getData(){//使用状态
			let res = await getData('EMerchantCouponStatus')
			let list = res.data || []
			this.stutus = [...list]
		},
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        let data = response.data || {}
        let list = data.list || []
        this.list = list.map(item=>{
          let obj = this.stutus.find(item1=>item1.value == item.status)
          if(!obj) obj = {}
          return {
            ...item,
            statusName:obj.label ? obj.label : ''
          }
        })
        this.total = Number(data.total || 0)
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.listQuery.startTime = this.listQuery.time[0] ? this.listQuery.time[0] : null
      this.listQuery.endTime = this.listQuery.time[1] ? this.listQuery.time[1] : null
      this.getList()
    }

  }
}
</script>
<style scoped lang="scss">
.admin-list{
  border: 1px solid #BEBDBD;
  box-shadow: 0px 2px 3px 0px rgba(64,158,255,0.1608);
  border-radius: 1px 1px 1px 1px;
  padding: 5px;
  height: 80px;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
</style>
